<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 样式代码初始化 */
        *{
            margin: 0;
            padding: 0;
        }
        body, button, input, select, textarea { 
            /* 注意：若单词组合间存在空格或者中文型号字体，需要添加引号 */
            font:12px/1.5 'Helvetica Neue',Helvetica,Arial,'PingFang SC','Hiragino Sans GB',
            'Microsoft YaHei','Heiti SC','WenQuanYi Micro Hei',sans-serif;
        }
        li{
            list-style: none;
        }
        a{
            text-decoration: none;
        }


        /* 代码主体 */
        .box{
            width: 1160px;
            height: 784px;
            /* box-shadow: 0 0 3px red; */
            margin: 10px auto;
        }
        /* 上 */
        .title{
            line-height: 74px;
            /* background: lawngreen; */
            text-align: center;
            font-weight: normal;
            font-size: 36px;
            color: #636363;
        }
        /* 中 */
        .list{
            height: 600px;
            /* background: lightcoral; */
        }
        .list li{
            width: 275px;
            height: 290px;
            box-shadow: 0 0 5px rgba(0, 0, 0, .5);
            float: left;
            margin-right: 20px;
            /* 鼠标变手 */
            cursor: pointer;
        }
        /* 伪类选择器 */
        .list li:hover .img_item{
            transform: scale(1.3);
        }
        /* 因为一排是4个，所以如果想选中每排的最后一个就需要4n */
        .list li:nth-of-type(4n){
            margin-right: 0;
        }
        /* 选中前四个li添加下外边距 */
        .list li:nth-of-type(-n+4){
            margin-bottom: 20px;
        }
        /* 列表-上 */
        .list_img{
            height: 185px;
            /* background: lawngreen; */
            /* 相对定位 */
            position: relative;
            /* 溢出隐藏 */
            overflow: hidden;
        }
        .img_item{
            display: block;
            width: 100%;
            height: 100%;
            /* 过渡 */
            transition:all .8s;
        }
        /* 精华 */
        .hot{
            width: 50px;
            height: 32px;
            /* 背景 */
            background-image: url('./imgs/hot.svg');
            background-size: 100% 100%;
            /* 绝对定位 */
            position: absolute;
            left: -5px;
            top: 10px;
            /* 行高 */
            line-height: 26px;
            color: #fff;
            text-align: center;
            font-size: 16px;
        }
        /* 留言 */
        .say{
            min-width: 23px;
            height: 25px;
            line-height: 25px;
            /* background: lawngreen; */
            /* 绝对定位 */
            position: absolute;
            right: 10px;
            bottom: 4px;
            line-height: 25px;
            color: #fff;
            font-size: 14px;
        }
        .say img{
            width: 20px;
            height: 20px;
            vertical-align: middle;
            margin-right: 3px;
        }

        /* 列表-中 */
        .list_author{
            width: 243px;
            height: 31px;
            /* background: lightblue; */
            /* margin-bottom: 12px; */
            margin: 0 auto 12px;
            /* 相对定位 */
            position: relative;
        }
        .list_author h2{
            float: left;
            margin-left: 56px;
            color: #636363;
            font-weight: normal;
            font-size: 14px;
            line-height: 31px;
        }
        /* 圆环 */
        .list_author .circle{
            width: 56px;
            height: 56px;
            background: #fff;
            /* 绝对定位---查找定位点---就近原则 */
            position: absolute;
            left: 0;
            bottom: 0px;
            border-radius: 50%;
        }
        .list_author .circle img{
            width: 48px;
            height: 48px;
            display: block;
            margin: 4px;
            border-radius: 50%;
        }

        /* 列表-下 */
        .list_desc{
            width: 243px;
            height: 48px;
            /* background: lightcoral; */
            margin: 0 auto;
            font-size: 16px;
            line-height: 24px;
            color: #101010;
            /* 多行省略号 */
            display:-webkit-box;/*必须结合的属性 ，将对象作为弹性伸缩盒子模型显示*/
            -webkit-line-clamp: 2;/*表示第几行裁剪*/
            -webkit-box-orient:vertical;/*必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式*/
            overflow: hidden;
        }
        /* 下 */
        .to_more{
            height: 110px;
            /* background: lemonchiffon; */
            overflow: hidden;
        }
        .to_more button{
            width: 220px;
            height: 50px;
            border: none;
            box-shadow: 0 0 5px rgba(0, 0, 0, .5);
            margin: 30px auto;
            display: block;
            background: #fff;
            font-size: 20px;
            color: #636363;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <!-- 
        命名 
        1、驼峰命命名法-大驼峰、小驼峰
        2、下划线命名法
        3、短横线命名法
    -->
    <!-- 容器盒子 -->
    <div class="box">
        <!-- 上-标题 -->
        <h1 class="title">热门游记与话题</h1>
        <!-- 中-列表 -->
        <ul class="list">
            <li>
                <a href="http://www.baidu.com">
                    <!-- 上 -->
                    <div class="list_img">
                        <img class="img_item" src="./imgs/01.jpg" alt="">
                        <div class="hot">精华</div>
                        <!-- 留言数 -->
                        <div class="say"><img src="./imgs/info.svg"/>100006</div>
                    </div>
                    <!-- 中 -->
                    <div class="list_author">
                        <!-- 左 -->
                        <div class="circle">
                            <img src="./imgs/user1.jpg" alt="">
                        </div>
                        <!-- 右 -->
                        <h2>极致的悠闲</h2>
                    </div>
                    <!-- 下 -->
                    <div class="list_desc">
                        【盒饭看世界】把隔离变成美食之旅：疫情下的香港隔离日记少时数算以撒
                    </div>
                </a>
            </li>
            <li>
                <a href="http://www.baidu.com">
                    <!-- 上 -->
                    <div class="list_img">
                        <img class="img_item" src="./imgs/02.jpg" alt="">
                        <div class="hot">精华</div>
                        <!-- 留言数 -->
                        <div class="say"><img src="./imgs/info.svg"/>106</div>
                    </div>
                    <!-- 中 -->
                    <div class="list_author">
                        <!-- 左 -->
                        <div class="circle">
                            <img src="./imgs/user2.jpg" alt="">
                        </div>
                        <!-- 右 -->
                        <h2>EllisInWL
                    </div>
                    <!-- 下 -->
                    <div class="list_desc">
                        我是你的俘虏【跟新疆私奔】喀什、帕米尔、喀纳斯、禾木、布时间啊少
                    </div>
                </a>
            </li>
            <li>
                <a href="http://www.baidu.com">
                    <!-- 上 -->
                    <div class="list_img">
                        <img class="img_item" src="./imgs/03.jpg" alt="">
                        <div class="hot">精华</div>
                        <!-- 留言数 -->
                        <div class="say"><img src="./imgs/info.svg"/>6</div>
                    </div>
                    <!-- 中 -->
                    <div class="list_author">
                        <!-- 左 -->
                        <div class="circle">
                            <img src="./imgs/user3.jpg" alt="">
                        </div>
                        <!-- 右 -->
                        <h2>AllenL艾伦伦</h2>
                    </div>
                    <!-- 下 -->
                    <div class="list_desc">
                        【遇见迪庆】云山的彼方，是被神眷顾的秘境天堂（雪山四部曲之...算以撒
                    </div>
                </a>
            </li>
            <li>
                <a href="http://www.baidu.com">
                    <!-- 上 -->
                    <div class="list_img">
                        <img class="img_item" src="./imgs/04.jpg" alt="">
                        <div class="hot">精华</div>
                        <!-- 留言数 -->
                        <div class="say"><img src="./imgs/info.svg"/>9</div>
                    </div>
                    <!-- 中 -->
                    <div class="list_author">
                        <!-- 左 -->
                        <div class="circle">
                            <img src="./imgs/user4.jpg" alt="">
                        </div>
                        <!-- 右 -->
                        <h2>极致的悠闲</h2>
                    </div>
                    <!-- 下 -->
                    <div class="list_desc">
                        斯里兰卡：尼甘布起止，包车环岛一圈，9天打卡8世遗（康提/丹时数算以撒
                    </div>
                </a>
            </li>
            <li>
                <a href="http://www.baidu.com">
                    <!-- 上 -->
                    <div class="list_img">
                        <img class="img_item" src="./imgs/05.jpg" alt="">
                        <div class="hot">精华</div>
                        <!-- 留言数 -->
                        <div class="say"><img src="./imgs/info.svg"/>68</div>
                    </div>
                    <!-- 中 -->
                    <div class="list_author">
                        <!-- 左 -->
                        <div class="circle">
                            <img src="./imgs/user5.jpg" alt="">
                        </div>
                        <!-- 右 -->
                        <h2>极致的悠闲</h2>
                    </div>
                    <!-- 下 -->
                    <div class="list_desc">
                        【潮汕寻食记：汕头篇 | 打开这座美食孤岛，享受舌尖上的高潮【更港隔离日记少时数算以撒
                    </div>
                </a>
            </li>
            <li>
                <a href="http://www.baidu.com">
                    <!-- 上 -->
                    <div class="list_img">
                        <img class="img_item" src="./imgs/06.jpg" alt="">
                        <div class="hot">精华</div>
                        <!-- 留言数 -->
                        <div class="say"><img src="./imgs/info.svg"/>1222222200006</div>
                    </div>
                    <!-- 中 -->
                    <div class="list_author">
                        <!-- 左 -->
                        <div class="circle">
                            <img src="./imgs/user6.jpg" alt="">
                        </div>
                        <!-- 右 -->
                        <h2>极致的悠闲</h2>
                    </div>
                    <!-- 下 -->
                    <div class="list_desc">
                        盛夏贵州 • 一路黔行
                    </div>
                </a>
            </li>
            <li>
                <a href="http://www.baidu.com">
                    <!-- 上 -->
                    <div class="list_img">
                        <img class="img_item" src="./imgs/07.jpg" alt="">
                        <div class="hot">精华</div>
                        <!-- 留言数 -->
                        <div class="say"><img src="./imgs/info.svg"/>100006</div>
                    </div>
                    <!-- 中 -->
                    <div class="list_author">
                        <!-- 左 -->
                        <div class="circle">
                            <img src="./imgs/user7.jpg" alt="">
                        </div>
                        <!-- 右 -->
                        <h2>极致的悠闲</h2>
                    </div>
                    <!-- 下 -->
                    <div class="list_desc">
                        【kris陈瑞瑞】2022行摄川西众神山|寻一座让心灵重获安宁记少时数算以撒
                    </div>
                </a>
            </li>
            <li>
                <a href="http://www.baidu.com">
                    <!-- 上 -->
                    <div class="list_img">
                        <img class="img_item" src="./imgs/08.jpg" alt="">
                        <div class="hot">精华</div>
                        <!-- 留言数 -->
                        <div class="say"><img src="./imgs/info.svg"/>100006</div>
                    </div>
                    <!-- 中 -->
                    <div class="list_author">
                        <!-- 左 -->
                        <div class="circle">
                            <img src="./imgs/user8.jpg" alt="">
                        </div>
                        <!-- 右 -->
                        <h2>极致的悠闲</h2>
                    </div>
                    <!-- 下 -->
                    <div class="list_desc">
                        杭州唐代遗迹打卡指南【花醉三千客 霜寒十四州】疑是龙骧凤翥离日记少时数算以撒
                    </div>
                </a>
            </li>
            
        </ul>
        <!-- 下-按钮 -->
        <div class="to_more">
            <button>查看更多游记</button>
        </div>
    </div>
</body>
</html>